<template>
  <div>
    <h1>编辑分类</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">分类名称:</label>
        <input type="text" v-model="category.name" required />
      </div>
      <div>
        <label for="description">分类描述:</label>
        <textarea v-model="category.description"></textarea>
      </div>
      <button type="submit">提交</button>
      <button @click="cancel">取消</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      category: {
        name: '',
        description: '',
      },
    };
  },
  methods: {
    submitForm() {
      this.$http.put(`/category/update`, this.category).then(() => {
        this.$router.push('/'); // 提交后返回分类列表
      });
    },
    cancel() {
      this.$router.push('/'); // 取消返回分类列表
    },
  },
  mounted() {
    const id = this.$route.query.id; // 获取分类 ID
    this.$http.get(`/category/${id}`).then(response => {
      this.category = response.data.data; // 假设返回的数据结构
    });
  },
};
</script>

<style>
h1 {
  color: #42b983; /* 标题颜色 */
}

form {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>
